<template>
    <div class="isbox">
        <input type="text" placeholder="添加你的愿望清单...." ref="ipt" v-model="msg">
        <button @click="tolist">提交</button>
    </div>
    <list :arr="newData" @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"></list>
</template>



<script setup>
import list from "../components/list.vue"
import { computed, ref } from "vue"

let local = {
    get(key){
        return JSON.parse(localStorage.getItem(key))
    },
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value))
    }
}



let ipt = ref()

let msg = ref()

let arr =ref(local.get('data') ?? [
    {
        id: '1',
        lists: "31321",
        isCompleted:true
    },
    {
        id: '2',
        lists: "asdasd",
        isCompleted:false
    },
    {
        id: '3',
        lists: "fghgf",
        isCompleted:true
    },  
])



let tolist = function () {
    let obj = {
    id:new Date().getTime(),
    lists: msg.value,
    isCompleted:false
}
   arr.value.push(obj)
   local.set('data',arr.value)
}

let delTodo =(input)=>{
    arr.value.splice(input,1)
    local.set('data',arr.value)
}

let filterFlag = ref('all')

let handleGetFlag = flag =>{
    console.log(flag);
    filterFlag.value = flag
}

let allCount = ref(0)
let completedCount = ref(0)
let activeCount = ref(0)


let newData = computed(()=>{
    let all = arr.value
let completed = arr.value.filter(item=>item.isCompleted);
let active =  arr.value.filter(item=>!item.isCompleted)

allCount.value = all.length;
completedCount.value = completed.length;
activeCount.value = active.length
    switch(filterFlag.value){
        case "all":
        return  all;
        case "completed":
            return completed
        case    "active":
            return active
    }
})

</script>




<style scoped>
.isbox {
    width: 440px;
   
    /* background-color: blue; */
    position: relative;
    left: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

input {
    border: none;
    border-bottom: dashed pink;
    margin-right: 6px;
    outline: none;
    font-size: 16px;
    padding: 5px;
    background-color: #f2f2f2;
}

button {
    width: 80px;
    height: 30px;
    border-radius: 15px;
    transform: rotate(3deg);
    background-color: pink;
    cursor: pointer;
}
</style>